<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="format-detection" content="telephone=no"/> <!--禁止数字串在ok手机中被识别成电话号码-->
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>{$data.cate_name}</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css2/base.css">
    <script src="__PUBLIC__/js/mouse/js/flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css2/mouse.css">
    <style type="text/css">
        .device_status{width: 20px;height: 18px;}
        .lable_status{height: 20px;line-height: 20px;}
    </style>
</head>
<body>
    <div class="header">
        <span>{$shop_name}</span><h1>{$data.name}</h1>
    </div>
    <div class="wrap">
        
        <div class="content">
            <div class="choose">
                <input type="hidden" id="deviceId" name="id" value="{$data.id}">
                <input type="hidden" id="ShopId" name="shop_id" value="{$data.shop_id}">
                <input type="hidden" id="cateId" name="cate_id" value="{$data.cate_id}">
                
                <div class="choose-h">
                    
                    <span>设备情况</span>
                    <span>(可同时勾选多项，异常和正常不可同时勾选)</span>
                </div>
                <ul class="choose-c clearfix">
                <foreach name="status" item="st">
                    <li style="width: 8.33333333rem;"><input type="checkbox" data-id="one{$key}" class="device_status one{$key}" id="OneSt{$st.id}" data-next={$st.is_next} name="{$st.id}" value="{$st.id}" onclick="two_status(this)"><label >{$st.status_name}</label></li>
                </foreach>
                </ul>
            </div>
            <div class="matter" style="margin-top: 30px;">
                <div class="matter-h">
                    <span>捕获情况</span>
                </div>
                <div class="matter-c">
                    <dl class="clearfix">
                        <dt>种类</dt>
                        <input type="text" class="" value="数量" readonly>
                    </dl>
                    <foreach name="pest_name" item="pn">
                        <dl class="clearfix">
                            <dt>{$pn.name}</dt>
                            <input type="tel" class="pest" data-id="{$pn.id}" name="{$pn.id}" placeholder="0" value="">
                        </dl>
                    </foreach>
                </div>
            </div>
        </div>
    </div>
    <div class="high40" style="height:40px;width: 100px;bottom: 0;">
</div>
    <div class="footer">
        <span id="submit" onclick="submitData()">提交</span>
    </div>
</body>

<script src="__PUBLIC__/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    function two_status(obj){
        var is_choose = $(obj).attr('checked');
        //判断正常和异常，两个不能同时选择
        //如果判断出is_choose是checked，则表明之前没有被选中
        if (is_choose == 'checked'){
            var this_id = $(obj).attr('data-id');
            //如果当前的id值为one0，则为正常情况，先判断异常one1是否已经选中
            if (this_id == "one0") {
                //检查异常项是否被选中
                var one1 = $(".one1").attr("checked");
                if (one1 == 'checked') {
                    $(obj).removeAttr('checked');
                    layer.msg("正常异常不能同时选择");
                    return false;
                }
            }
            //如果当前的id值为one1，则为异常情况情况，先判断异常one0是否已经选中
            if (this_id == "one1") {
                //检查异常项是否被选中
                var one0 = $(".one0").attr("checked");
                if (one0 == 'checked') {
                    $(obj).removeAttr('checked');
                    layer.msg("正常异常不能同时选择");
                    return false;
                }
            }
        }
        if (is_choose == 'checked') {
            var is_next = $(obj).attr('data-next')
            if (is_next == 1) {
                var id = $(obj).attr('name');
                var url = '__MODULE__/Light/status_2/id/' + id;
                layer.open({
                      type: 2,
                      area: ['95%', '80%'],
                      fixed: false, //不固定
                      maxmin: true,
                      content: url
                });
            }
            return false;
        }else{
            $(obj).val("");
        }
    };
    function submitData(){
        //记录设备状态
        deviceStatus = {};
        $("input.device_status").each(function(){
            //查看当前设备状态是否被选中
            if (this.checked) {
                //如果有下一级状态，将下一级状态的获取到
                if ($(this).attr('data-next') == '1') {
                    deviceStatus[this.name] =JSON.parse(unescape(this.value));
                    console.log(deviceStatus[this.name])
                }else{
                    //如果设备没有下一级状态，直接将转态值设为1
                    deviceStatus[this.name] = 1;
                }
            }
        });
        //记录捕获飞虫的数量
        pestData = {};
        $("input.pest").each(function(){
            pestData[this.name] = this.value ? this.value : 0;
        });
        postData = {};
        postData['id'] = $("#deviceId").val();
        postData['shop_id'] = $("#ShopId").val();
        postData['status'] = deviceStatus;
        postData['animal'] = pestData;
        var url = "{:U('Light/add')}";
        $.post(url,postData,function(result){
            if (result.status == 1) {
                //alert(JSON.stringify(result.data));
                layer.msg(result.message);
                window.location.href="{:U('Index/index')}"
            }if (result.status == 0) {
                layer.msg(result.message);
            }
        },"JSON");
        return false; 
    }
</script>
</html>
